<template>
    <div>
        主题：
        <select v-model="selectedTheme">
            <option :value="value" v-for="value in ThemeNames">
                {{ value }}
            </option>
        </select>
        语言：
        <select v-model="selectedLanguage">
            <option :value="value" v-for="value in Languages" :key="value">
                {{ value }}
            </option>
        </select>
    </div>

    <monaco-editor v-model="code" style="flex:1" :language="selectedLanguage" :theme="selectedTheme"
        @ready="editorReady">
    </monaco-editor>
</template>

<script lang="ts" setup>
import monacoEditor, { LanguageList, ThemeName, ThemeStore } from '../'
import { ref, reactive, onMounted } from 'vue';
const code = ref('')
const ThemeNames = ref([])
const selectedTheme = ref<ThemeName>("github-gist")
const selectedLanguage = ref<LanguageList>("javascript")
const Languages = ref([])

onMounted(() => {
    fetch(
        "https://fastly.jsdelivr.net/npm/@konghayao/promise-transaction/src/index.js"
    )
        .then((res) => res.text())
        .then((Code) => (code.value = Code));
    console.log("代码载入");
})
const editorReady = () => {
    console.log('编辑器准备完成');
    ThemeNames.value = Object.keys(ThemeStore)
    Languages.value = window.monaco.languages.getLanguages().map(i => i.id)
}
</script>